<template>
  <div>
    <el-button type="primary" @click="addUser()">新增</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="id" width="200"></el-table-column>
      <el-table-column prop="name" label="角色号" width="350"></el-table-column>
      <el-table-column prop="username" label="角色名称" width="375"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small">编辑</el-button>
          <el-button @click="shouquan(scope.row)" type="text" size="small">授权</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <el-dialog title="授权" :visible.sync="dialogShouquan">
      <el-tree
        :data="data2"
        show-checkbox
        node-key="id"
        ref="tree"
        :default-expanded-keys="checkedKeys"
        :default-checked-keys="checkedKeys"
        :props="defaultProps"
      ></el-tree>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShouquan = false">取 消</el-button>
        <el-button type="primary" @click="submitRoleMenu">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage4: 1,
      pageSizes: [1, 2, 3, 4],
      pageSize: 2,
      total: 400,
      dialogShouquan: false,
      checkedKeys:[],
      rid:0,
       data2: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getRole();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.getRole();
    },
    submitRoleMenu() {
      console.log(this.$refs.tree.getCheckedKeys());
      console.log("rid:",this.rid);
      var $this =this;
     this.axios({
        method: "post",
        url: "http://localhost:8081/menu/menuRole",
        data: {rid:this.rid,menuIdList:this.$refs.tree.getCheckedKeys()}
      }).then(function(res) {
          $this.$message(res.data.msg);
          if(res.data.code==200){
             $this.dialogShouquan = false; 
             $this.getRole();
          }
      });

    },
    getRole() {
      console.log("---------------");
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:8081/role/list",
        params: { pageNo: this.currentPage4, pageSize: this.pageSize }
      }).then(function(res) {
        $this.tableData = res.data.obj.list;
        $this.total = res.data.obj.total;
      });
    },
    shouquan(row) {
      //1、弹出层
      this.dialogShouquan = true;
      var $this = this;
      this.rid =row.id;
       console.log('row',row);
      console.log('this.rid:',this.rid);
      //2、根据角色id查询对应的角色菜单以树形复选框进行显示
      this.axios({
        method: "get",
        url: this.requestUrl + "/menu/getMenuList"
      }).then(function(res) {
        console.log("查询所有角色列表.....", res);
        $this.data2 = res.data.obj;
      });

      //3、回显 根据选择的用户对应角色进行回显
      //2、查询所有的角色以复选框进行显示
      this.axios({
        method: "get",
        url: this.requestUrl + "/menu/getMenuListByRid",
        params:{rid:this.rid}
      }).then(function(res) {
        console.log("查询所有角色列表.....", res);
        var list = res.data.obj;
        $this.checkedKeys = list;

      });
    }
  },
  mounted() {
    this.getRole();
  }
};
</script>